<template>
    <div>
        <div id="content">
            
        <!-- 头部标签 -->
        <wgyback title='购物车'></wgyback>
       
       <!-- <div v-if="cartList.basicInfo"> -->
           
      
       <van-checkbox-group v-model="result"  ref="checkboxGroup">
            <van-checkbox :name="item"  v-for="(item,i) in cartList" :key="i">
                  <van-card
                    :num="item.num"
                    :price="item.basicInfo.pingtuanPrice"
                    :desc="item.size"
                    :title="item.basicInfo.name"
                    :thumb="item.basicInfo.pic"
                    >
                    </van-card>
            </van-checkbox>
        </van-checkbox-group>
        <van-submit-bar :price="allPrice"  button-text="下单" @submit="onSubmit">
        <van-checkbox v-model="checkedIS"  @click="checkAll">全选</van-checkbox>
        </van-submit-bar>
         <!-- </div> -->
        <!--  猜你喜欢部分-->
        <wgylike  class="foot" :guessLike='guessLike'></wgylike>


       


        
        <!-- 底部tab切换 -->
        <div class="foot"><wgy-tab  /></div>
        </div>

    </div>
</template>

<script>
import wgyTab from '@/components/wgy-Tab/wgy-Tab'

import { getGoodsList } from '../../utils/api/Cart'

import wgyback from '@/components/Cart/wgy-back/wgy-back'
import wgylike from '@/components/Cart/wgy-like/wgy-like'
export default {
    name: 'index',
    data() {
        return {
            guessLike:[],
            cartList:[],
            result: [],
            checkedIS:false

        };
    },
    created() {
        this.$loading.show('拼命加载中...')

        // 获取购物车全部数据
        console.log(this.$store.state.list);
        this.cartList = this.$store.state.list


        // 获取猜你喜欢的数据
        getGoodsList().then(res => {
            this.guessLike = res.data.splice(5,3)
            this.$loading.hide()

        })
    },
    methods: {
        // 提交订单
        onSubmit() {

        },
        // 全选
         checkAll() {
        this.$refs.checkboxGroup.toggleAll(this.checkedIS);
        },

    },
    //组件挂载
    components: {
        wgyback,
        wgylike,
        wgyTab,


    },
    //计算属性
    computed: {
         allPrice() {
        var p = 0;
        this.result.forEach(item => {
            p += item.basicInfo.pingtuanPrice * item.num*100
        })
            return p
            console.log(p);

        }
    },
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
  #content{
        width: 100%;
        height:580px;
        overflow: hidden;
        overflow-y: auto;
    }
/deep/{
    .van-checkbox__label{
        width: 100%;
    }
    .van-submit-bar{
        bottom: 50px;
        border-bottom: 1px solid #eee;
    }
    .van-button--round{
        border-radius: 0px;
    }
}
</style>
